var dotsDom = document.querySelector('.dot');
// 获取图片元素
var imagesList = document.querySelectorAll('.roll > .image1');
console.log(imagesList);
var leftDom = document.querySelector('.left>img');
var rightDom = document.querySelector('.right>img');

let timer;
// 图片数量
var totalImages = imagesList.length;

// 设置初始图片索引
let originIndex = 0;
// 设置定时器

function startTimer() {
    timer = setInterval(function () {
        imagesList[originIndex].style.display = 'none';
        originIndex = (originIndex + 1) % totalImages;
        imagesList[originIndex].style.display = 'block';
    }, 1000);
}

// 调用定时器
startTimer();

// // 点上一张

let clickLeft = function () {
    console.log('点击上一张');
    clearInterval(timer);
    startTimer();
}


let clickRight = function () {
    console.log('点击下一张');
    clearInterval(timer);
    startTimer();

}


let stopTimer = function () {
    console.log('停止自动切换');
    clearInterval(timer);
}

let resumeTimer = function () {
    console.log('恢复自动切换');
    startTimer();
}


leftDom.addEventListener('click', clickLeft)
rightDom.addEventListener('click', clickRight)

// 鼠标悬停停止自动切换
document.querySelector('.roll').addEventListener('mouseover', stopTimer);
// 鼠标移开恢复自动切换
document.querySelector('.roll').addEventListener('mouseout', resumeTimer);






// 小圆圈
let dots = document.querySelectorAll('.dot');
function showImage(index) {
    imagesList.forEach(function (img) {
        img.style.display = 'none';
    });
    imagesList[index].style.display = 'block';
    dots.forEach(function (dot) {
        dot.classList.remove('active');
    });
    dots[index].classList.add('active');
}
dots.forEach(function (dot, index) {
    dot.addEventListener('click', function () {
        clearInterval(timer);
        originIndex = index;
        showImage(originIndex);
        startTimer();
    })
});


//五星好评
let sumDomList = document.querySelectorAll('.sum');
console.log(sumDomList);

sumDomList.forEach(function (sumDom) {
    let star2 = sumDom.querySelector('.star2');
    console.log(star2);

    sumDom.addEventListener('click', function (event) {
        let x = event.offsetX;
        star2.style.clip = `rect(0px, ${x}px, ${star2.offsetHeight}px, 0px)`;
        // star2.style.width = x +'px'
    });
});


// let sumDom = document.querySelector('.sum');
// let star2Dom = document.querySelector('.star2');
// console.log(sumDom);
// console.log(star2Dom);
// sumDom.addEventListener('click',function(event){
//     let x = event.offsetX;
//     star2Dom.style.width = x + 'px';
// })


/**手风琴效果 */

// 鼠标移入 某一个li
// 将所有的内容 隐藏
// 将所有的标题 显示
// 对应的 内容  显示
// 对应的标题  隐藏
let ebookList = document.querySelectorAll('.ebook-list ul li');
let bookNames = document.querySelectorAll('.book-name');

let bookContents = document.querySelectorAll('.book-content')
console.log(bookNames);
console.log(bookContents);
// 设置默认效果
bookNames[0].className = 'book-name clearfix disnone';
bookContents[0].className = 'book-content clearfix show';

for (let i = 0; i < ebookList.length; i++) {
    ebookList[i].addEventListener('mouseover', function () {

        for (let j = 0; j < bookNames.length; j++) {
            bookContents[j].className = 'book-content clearfix disnone';
            bookNames[j].className = 'book-name clearfix show'
        }
        bookContents[i].className = 'book-content clearfix show';
        console.log(bookNames[i]);
        bookNames[i].className = 'book-name clearfix disnone';
    })
}




// 轮播手风琴
const bookinfos = document.querySelectorAll('.bookinfo');
bookinfos.forEach((bookinfo, index) => {
    if (index === 0) {
        bookinfo.style.height = '100px'; // 设置第一个bookinfo的默认高度为100px
    } else {
        bookinfo.style.height = '45px'; // 设置其他bookinfo的默认高度为45px
    }
    bookinfo.addEventListener('mouseover', () => {
        bookinfos.forEach((info) => {
            if (info !== bookinfo) {
                info.style.height = '45px'; // 设置其他盒子高度
            }
        });

        if (bookinfo.style.height === '100px') {
            bookinfo.style.height = '70px'; // 收起当前盒子
        } else {
            bookinfo.style.height = '100px'; // 展开当前盒子
        }
    });
});


//选项卡
// 获取所有的标题dom
let bookitem1 = document.querySelectorAll('.book-item1');
// 获取所有的内容dom
let plate1list = document.querySelectorAll('.plate3-list');
//  点击事件：
//  循环 监听所有的标题 的点击事件  
    bookitem1.forEach(function (item, index) {
    item.addEventListener('click', function () {
        //  循环所有的标题，取消类名为active    循环所有内容，取消显示类名 show, 
        for (let i = 0; i < bookitem1.length; i++) {
            // 覆盖赋值 class的类名 
            bookitem1[i].className = 'book-item1'
            plate1list[i].className = 'plate3-list'
        }
        //  index 对应标题  加 active  
        bookitem1[index].className = 'book-item1 activestyle'
        // index 对应的内容加 show  
        plate1list[index].className = 'plate3-list showstyle'
    })
})

//跳转购物车
let carDom = document.querySelector('#l');
carDom.addEventListener('click', function () {
    window.location.href = './car.html';
})

//跳转到我的订单
let orderDom = document.querySelector('#r');
orderDom.addEventListener('click', function () {
    window.location.href = './orderpage.html';
})



// // 第三板块小圆圈
let dots3 = document.querySelectorAll('.dot3');
let plate1listDom = document.querySelector('.plate3-list');
console.log(dots3);
console.log(plate1listDom);


//     function showImage(index) {
//         plate1list.forEach(function (img) {

//             img.style.display = 'none';

//         });
//         plate1list[index].style.display = 'block';
//         dots3.forEach(function (dot) {
//             dot.classList.remove('active');
//         });
//         dots3[index].classList.add('active');

//     }
//     dots3.forEach(function (dot, index) {
//         dot.addEventListener('click', function () {
//             // clearInterval(timer);
//             originIndex = index;
//             showImage(originIndex);
//             // startTimer();
//         })
//     });

//页面跳转
let navLogin = document.querySelector('.nav-login');
let navRegist = document.querySelector('.nav-regist');
//跳转登录注册
// let loginDom = document.querySelector('.welcome span');

navLogin.addEventListener('click', function () {
    window.location.href = './login.html';
});
navRegist.addEventListener('click', function () {
    window.location.href = './register.html';
});

let bookItemDom = document.querySelectorAll('.plate1-item');
bookItemDom.forEach(function (item) {
    item.addEventListener('click', function () {
        window.location.href = './goodsDetail.html';
    });
});
// loginDom.addEventListener('click',function(){
//     window.location.href = '/register.html';

// })

//顶部显隐

let searchBoxDom = document.querySelector('.search-box')
let searchInp = document.querySelector('.s-11')
let searchInp1 = document.querySelector('.search1')
let btnDom = document.querySelector('.s-btn');
//1.监听页面的滚动事件 
window.addEventListener('scroll',function(){
    //获取当前滚动条距离顶部的位置 
     let top = document.documentElement.scrollTop || document.body.scrollTop 
    // 如果位置大于300 设置searchBox 高度
    if(top>300){
        searchInp1.style.display = 'block'; // 显示search1输入框
        btnDom.style.display = 'flex';

    } else {
        searchInp1.style.display = 'none'; // 隐藏search1输入框
        btnDom.style.display = 'none';

    }
})
// 两个input 数据同步   .value
// 监听 两个input 的 输入 input 事件  
//  分别将当前input的value 赋值给另一个input的value 
searchInp.addEventListener('input',function(){
    searchInp1.value = searchInp.value
})
searchInp1.addEventListener('input',function(){
    searchInp.value = searchInp1.value 
})


//返回顶部
let tab = document.querySelector('.tab');
window.addEventListener('scroll', function () {
    let top = document.documentElement.scrollTop || document.body.scrollTop
    console.log(top);
    if (top > 500) {
        tab.style.display = 'block';
    } else {
        tab.style.display = 'none';
    }

})


tab.addEventListener('click', function () {
    let timer = setInterval(function () {
        let top = document.documentElement.scrollTop || document.body.scrollTop
        let current = top - 30;

        document.documentElement.scrollTop = current;
        document.body.scrollTop = current;

        if (current <= 0) {
            clearInterval(timer);
        }


    }, 60)
})



